import React, {Component} from 'react';
import {connect} from 'react-redux';
import * as qs from 'query-string';
import './style/login.css';
import {Form, Button, Input, Alert, Icon} from 'antd';
import {performLogin, resetForm} from "./action/login-action";
import {withRouter} from "react-router-dom";

class Login extends Component {
    state = {
        username: '',
        password: '',
    };

    componentDidMount() {
        this.props.resetForm();
    }

    componentWillUnmount() {
        this.props.resetForm();
    }

    componentDidUpdate(prevProps) {
        if (!this.props.error && prevProps.isLoading && !this.props.isLoading) {
            let query = qs.parse(this.props.location.search);

            if (query && query.r) {
                this.props.history.push(query.r);
            }
        }
    }

    login = (e) =>  {
        e.preventDefault();
        const {validateFields} = this.props.form;

        validateFields((error, values) => {
            if (error)
                return;

            this.props.onLogin(values.username, values.password);
        });
    };

    render() {

        const {getFieldDecorator} = this.props.form;
        let errorDisplayStyle = this.props.error ? 'block' : 'none';

        return (
            <div className={'login-bg'}>
                <div className={'login-box'}>
                    <div className={'content'}>
                        <Form onSubmit={this.login}>
                            <Form.Item className={'title'}>登录</Form.Item>
                            <Form.Item>
                                <Alert message={this.props.error}
                                       type="error"
                                       style={{
                                           display: errorDisplayStyle
                                       }}
                                       showIcon/>
                            </Form.Item>
                            <Form.Item hasFeedback={true}>
                                {getFieldDecorator('username', {
                                    rules: [
                                        { required: true, message: '用户名必须输入' },
                                        { whitespace: true, message: '用户名不能为空'}
                                    ]
                                })(
                                    <Input placeholder={'登录'}
                                           type={'text'}
                                           prefix={<Icon type="user" style={{fontSize: 13}}/>}
                                           autoFocus
                                           autoCapitalize="off"
                                           autoCorrect="off"
                                    />
                                )}
                            </Form.Item>
                            <Form.Item hasFeedback={true}>
                                {getFieldDecorator('password', {
                                    rules: [
                                        { required: true, message: '密码必须输入' },
                                        { whitespace: true, message: '密码不能为空' }
                                    ]
                                })(
                                    <Input placeholder={'密码'}
                                           type={'password'}
                                           prefix={<Icon type="lock" style={{fontSize: 13}}/>}
                                    />
                                )}
                            </Form.Item>
                            <Form.Item>
                                <Button className={'login-btn'}
                                        type={'primary'}
                                        icon={'login'}
                                        htmlType={'submit'}
                                        loading={this.props.isLoading}>登录</Button>
                            </Form.Item>
                        </Form>
                    </div>
                </div>
            </div>
        );
    }
}

const mapStateToProps = (state) => {
    return {
        isLoading: state.authenticationReducer.isLoading,
        error: state.authenticationReducer.error,
        r: state.authenticationReducer.r,
    }
};

const mapDispatchToProps = (dispatch) => {
    return {
        resetForm: () => {
            dispatch(resetForm());
        },
        onLogin: (username, password) => {
            dispatch(performLogin(username, password));
        }
    }
};

export default withRouter(Form.create()(connect(mapStateToProps, mapDispatchToProps)(Login)));

